<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色渐变</title>
    <style>
        .box{
            width:200px;
            height:300px;
            /*线性渐变*/
            /*background:linear-gradient(red,blue);*/
            /*background:linear-gradient(to right bottom ,green 50%,red);*/
            /*径向渐变*/
            background:radial-gradient(ellipse,deeppink 20%,blue 70%);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>